<template>
    <div style="font-size: .16rem;">
        <div style="position: relative;top: 2rem;width: 90%;margin: 0 auto;">
            <div>
                <p style="font-size: .13rem">{{text}}</p>
            </div>
            <progress-bar :barwidth="value"></progress-bar>
        </div>
    </div>
</template>

<script>
    import progressBar from '@/components/commons/common/progressBar.vue';
    import {getData} from "../../../config/getData";
    import {mapState, mapMutations} from 'vuex';
    export default {
        data () {
            return {
                partid: null,
                value: 0,
                count: 0,
                allCount: 0,
                text: "亲，数据加载中，稍等片刻......"
            }
        },
        components: {
            progressBar
        },
        created() {
            this.partid = this.$route.query.partid;
        },
        mounted() {
            this.GET_SEX();
            this.initImg();
        },
        computed: {
            ...mapState([
                'sex'
            ]),
        },
        watch: {
            count (val) {
                this.value = parseInt((val / this.allCount) * 100, 10)
                if (val == this.allCount) {
                    setTimeout(() => {
                        this.$router.push({
                            path: '/home/scenario',
                            query: {
                                partid: this.partid,
                            }
                        })
                    }, 2000)
                }
            }
        },
        methods: {
            ...mapMutations([
                'GET_SEX'
            ]),
            initImg() {
                console.log(this.sex);
                if (!this.sex) {
                    this.$toast.show({text: "请重新选择性别", time: 1500});
                    this.$router.push('/home/selectSex');
                    return;
                }
                let allData = getData(0).plot;
                this.allCount = allData.length * 4;
                allData.forEach((item) => {
                    let imgA = new Image();
                    let imgB = new Image();
                    let imgScene = new Image();
                    let imgMaster = new Image();
                    imgA.onload = () => {
                        setTimeout(() => {
                            this.count++
                        }, 100)
                    };
                    imgB.onload = () => {
                        setTimeout(() => {
                            this.count++
                        }, 100)
                    };
                    imgScene.onload = () => {
                        setTimeout(() => {
                            this.count++
                        }, 100)
                    }
                    imgMaster.onload = () => {
                        setTimeout(() => {
                            this.count++
                        }, 100)
                    }
                    imgA.src = require('@/assets/image/scenario-1/' +  item.roleA + '.png');
                    imgB.src = require('@/assets/image/scenario-1/' + item.roleB + '.png');
                    imgScene.src = require('@/assets/image/scenario-1/' + item.scene + '.png');
                    imgMaster.src = require('@/assets/image/master.jpg')
                })
                console.log(this.count);
                console.log(this.allCount);
            },
            add() {

            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
